<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chart</title>
    <style> #text { font-size: 18px; margin-bottom: 10px; }
        #colorPicker {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>


<!--消息体-->
<svg viewBox="0 0 600 330">

    <defs>
        <filter id="conform">
            <!--图片滤镜-->
            <feImage
                    href="bg01.jpg"
                    x="0"
                    y="0"
                    width="600"
                    height="330"
                    preserveAspectRatio="none"
                    result="ORIGIN_IMAGE"
            ></feImage>
            <!--灰度滤镜-->
            <feColorMatrix
                in="ORIGIN_IMAGE"
                type="saturate"
                values="0"
                result="GRAY_IMAGE"
            ></feColorMatrix>
            <feDisplacementMap
                in="SourceGraphic"
                in2="GRAY_IMAGE"
                scale="15"
                xChannelSelector="R"
                yChannelSelector="R"
                result="TEXTURED_TEXT"
            ></feDisplacementMap>
            <feImage
            href="bg01.jpg"
            x="0"
            y="0"
            width="100%"
            height="330"
            preserveAspectRatio="none"
            ></feImage>
            <feColorMatrix
                in="TEXTURED_TEXT"
                result="OPACITY_TEXT"
                type="matrix"
                values="1 0 0 0 0
                    0 1 0 0 0
                    0 0 1 0 0
                    0 0 0 .9 0"
            ></feColorMatrix>
            <feBlend
                in="BG"
                in2="OPACITY_TEXT"
                mode="multiply"
                result="BLENDED_TEXT"
            ></feBlend>
        </filter>
    </defs>
        <image
                href="bg01.jpg"
                x="0"
                y="0"
                width="100%"
                height="330"
                preserveAspectRatio="none"
        ></image>
        <text
        x="50%"
        y="50%"
        font-size="10em"
        text-anchor="middle"
        alignment-baseline="middle"
        filter="url(#conform)"
        id="txt"
        >
            LOGO
        </text>
</svg>


<input onblur="changeText()" type="color" id="colorPicker" value="#000000">
<input onblur="changeText()" type="text" id="text" value="LOGO">
</body>
<script>
    function changeText() {
        console.log("触发方法")
        const text = document.getElementById("text").value;
        const color = document.getElementById("colorPicker").value;
        console.log("颜色"+color)
        document.getElementById("txt").innerHTML = text;
        document.getElementById("txt").style.fill = color;
    }
</script>
</html>